<template>
	<view class="content">
		<view class="header">
			<view class="search">
				<view class="s_box">
					<view class="left">
						<view class="icon">


							<image src="../../../static/images/shopowner/search.png" mode="aspectFit"></image>


							<image src="../../../static/images/shopowner/search.png" mode="aspectFit"></image>

							<image src="/technicianadd/static/images/search.png" mode="aspectFit"></image>



							<image src="/technicianadd/static/images/search.png" mode="aspectFit"></image>

						</view>
						<input class="uni-input font28" focus placeholder="门店名称" placeholder-style="font-size: 28rpx;" />
					</view>
					<view class="title font28">
						搜索
					</view>
				</view>
			</view>
			<view class="drop_down">
				<uv-drop-down ref="dropDown" sign="dropDown_1" text-active-color="#1EB481"
					:extra-icon="{name:'arrow-down-fill',color:'#666',size:'26rpx'}"
					:extra-active-icon="{name:'arrow-up-fill',color:'#1EB481',size:'26rpx'}" :defaultValue="defaultValue"
					:custom-style="{padding: '0 30rpx'}" @click="selectMenu">
					<uv-drop-down-item name="health" type="2" :label="dropItem('health').label" :value="dropItem('health').value">
					</uv-drop-down-item>
					<uv-drop-down-item name="teahouse" type="2" :label="dropItem('teahouse').label"
						:value="dropItem('teahouse').value">
					</uv-drop-down-item>
					<uv-drop-down-item name="haircut" type="2" :label="dropItem('haircut').label"
						:value="dropItem('haircut').value">
					</uv-drop-down-item>
				</uv-drop-down>
				<uv-drop-down-popup sign="dropDown_1" :click-overlay-on-close="true" :currentDropItem="currentDropItem"
					@clickItem="clickItem" @popupChange="change"></uv-drop-down-popup>
			</view>
		</view>
		<view class="box">
			<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltolower="scrolltolower">
				<view class="item" v-for="(item,index) in shopList" :key="index">
					<view class="left">
						<view class="name font28 fontw">
							{{item.vipName}}{{item.phone}}
						</view>
						<view class="time font28 fontw">
							上次消费 {{item.s_pay}}
						</view>
					</view>
					<view class="revenue font28 font500">
						<text>会员卡号</text>{{item.type}}
					</view>
					<view class="number font28 font500">
						<text>总额累计</text>{{item.tole}}
					</view>
					<view class="add font28 font500">
						<text>卡内余额</text>{{item.money}}
					</view>
					<view class="add font28 font500">
						<text>有效期</text>{{item.time}}
					</view>
					<view class="add font28 font500">
						<text>开卡门店</text>{{item.shop}}
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		onPageScroll() {
			// 滚动后及时更新位置
			this.$refs.dropDown.init();
		},
		computed: {
			dropItem(name) {
				return (name) => {
					const result = {};
					const find = this.result.find(item => item.name === name);
					if (find) {
						result.label = find.label;
						result.value = find.value;
					} else {
						result.label = this[name].label;
						result.value = this[name].value;
					}
					return result;
				}
			},
			// 获取当前下拉筛选项
			currentDropItem() {
				return this[this.activeName];
			}
		},
		data() {
			return {
				scrollTop: 0,
				// 表示value等于这些值，就属于默认值
				shopList: [{
					vipName: '张先生',
					phone: '13612345678',
					s_pay: '2024-09-05',
					type: 'VIP贵宾卡',
					tole: '充值10000 消费600',
					money: '4000(实际￥4000，赠送￥0)',
					time: '2856-02-19 11:28:46',
					shop: '泰式按摩店 2024-09-05 11:28:46'
				}, {
					vipName: '张先生',
					phone: '13612345678',
					s_pay: '2024-09-05',
					type: 'VIP贵宾卡',
					tole: '充值10000 消费600',
					money: '4000(实际￥4000，赠送￥0)',
					time: '2856-02-19 11:28:46',
					shop: '泰式按摩店 2024-09-05 11:28:46'
				}, {
					vipName: '张先生',
					phone: '13612345678',
					s_pay: '2024-09-05',
					type: 'VIP贵宾卡',
					tole: '充值10000 消费600',
					money: '4000(实际￥4000，赠送￥0)',
					time: '2856-02-19 11:28:46',
					shop: '泰式按摩店 2024-09-05 11:28:46'
				}, {
					vipName: '张先生',
					phone: '13612345678',
					s_pay: '2024-09-05',
					type: 'VIP贵宾卡',
					tole: '充值10000 消费600',
					money: '4000(实际￥4000，赠送￥0)',
					time: '2856-02-19 11:28:46',
					shop: '泰式按摩店 2024-09-05 11:28:46'
				}],
				defaultValue: [0, 'all', '0'],
				// 筛选结果
				result: [],
				activeName: 'health',
				health: {
					label: '卡类',
					value: 'all',
					activeIndex: 0,
					color: '#333',
					activeColor: '#1EB481',
					child: [{
						label: '综合排序',
						value: 'zong'
					}, {
						label: '最新发布',
						value: 'new'
					}, {
						label: '低价优先',
						value: 'money'
					}]
				},
				teahouse: {
					label: '性别',
					value: 'all',
					activeIndex: 0,
					color: '#333',
					activeColor: '#1EB481',
					child: [{
						label: '全部',
						value: 'quan'
					}, {
						label: 'PDF',
						value: 'pdf'
					}, {
						label: 'WROD',
						value: 'word'
					}, {
						label: 'PPT',
						value: 'ppt'
					}]
				},
				haircut: {
					label: '店铺',
					value: 'all',
					activeIndex: 0,
					color: '#333',
					activeColor: '#1EB481',
					child: [{
						label: '全部',
						value: 'quan'
					}, {
						label: 'PDF',
						value: 'pdf'
					}, {
						label: 'WROD',
						value: 'word'
					}, {
						label: 'PPT',
						value: 'ppt'
					}]
				},
			};
		},
		methods: {
			scrolltolower() {

			},
			change(e) {
				console.log('弹窗打开状态：', e);
			},
			/**
			 * 点击每个筛选项回调
			 * @param {Object} e { name, active, type } = e
			 */
			selectMenu(e) {
				const { name, active, type } = e;
				this.activeName = name;
				// type 等于1 的需要特殊处理：type不等于1可以忽略
				if (type == 1) {
					this.clickItem({
						name: 'vip_type',
						label: 'VIP文档',
						value: e.active ? 1 : 0
					});
				} else {
					const find = this.result.find(item => item.name == this.activeName);
					if (find) {
						const findIndex = this[this.activeName].child.findIndex(item => item.label == find.label && item.value ==
							find.value);
						this[this.activeName].activeIndex = findIndex;
					} else {
						this[this.activeName].activeIndex = 0;
					}
				}
			},
			/**
			 * 点击菜单回调处理
			 * @param {Object} item 选中项 { label,value } = e
			 */
			clickItem(e) {
				// 下面有重新赋值，所以用let
				let { label, value } = e;
				const findIndex = this.result.findIndex(item => item.name == this.activeName);
				if (this.defaultValue.indexOf(value) > -1 && this[this.activeName].label) {
					label = this[this.activeName].label;
				}
				// 已经存在筛选项
				if (findIndex > -1) {
					this.$set(this.result, findIndex, {
						name: this.activeName,
						label,
						value
					})
				} else {
					this.result.push({
						name: this.activeName,
						label,
						value
					});
				}
				this.result = this.result.filter(item => this.defaultValue.indexOf(item.value) == -1);
				console.log(this.result[0]);
			}
		}
	}
</script>

<style lang="scss">
	.content {
		.header {
			padding-top: 33rpx;
			background-color: #fff;
			margin-bottom: 18rpx;

			.search {
				padding: 0 20rpx 0 35rpx;

				.s_box {
					background: #F5F5F5;
					border-radius: 50rpx;
					padding: 20rpx 28rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.left {
						.icon {
							width: 24rpx;
							height: 26rpx;
							margin-right: 26rpx;
							display: flex;
							align-items: center;

							image {
								width: 24rpx;
								height: 26rpx;
							}
						}

						.uni-input {}
					}

					.title {
						color: #333333;
					}
				}
			}

			.drop_down {
				/deep/.uv-sticky {
					.uv-sticky__content {
						.uv-drop-down {
							border-bottom: unset;
						}
					}
				}
			}

		}

		.box {
			padding: 0 30rpx;

			.scroll-Y {
				height: calc(100vh - var(--status-bar-height) - 204rpx);

				.item {
					padding: 45rpx 32rpx 48rpx 25rpx;
					background-color: #fff;
					margin-bottom: 13rpx;

					.left {
						justify-content: space-between;
						margin-bottom: 53rpx;

						.name {}

						.time {}
					}

					.revenue {
						display: flex;
						align-items: center;
						margin-bottom: 18rpx;
						color: #FF4200;

						text {
							display: block;
							color: #A1A7B2;
							width: 182rpx;
						}
					}

					.number {
						display: flex;
						align-items: center;
						margin-bottom: 18rpx;

						text {
							display: block;
							color: #A1A7B2;
							width: 182rpx;
						}
					}

					.add {
						display: flex;
						align-items: center;
						margin-bottom: 18rpx;

						text {
							display: block;
							color: #A1A7B2;
							width: 182rpx;
						}
					}
				}
			}
		}
	}
</style>